<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <title>Password Update Form</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag" />
</head>

<body>
    <main role="main" class="container mt-3 mb-3">
        <div th:fragment="pwdupdateform" class="">
            <script th:inline="javascript">
                /*<![CDATA[*/

                var policyPattern = /*[[${policyPattern}]]*/;
                var passwordStrengthI18n = {
                    0: /*[[#{screen.pm.password.strength.0}]]*/,
                    1: /*[[#{screen.pm.password.strength.1}]]*/,
                    2: /*[[#{screen.pm.password.strength.2}]]*/,
                    3: /*[[#{screen.pm.password.strength.3}]]*/,
                    4: /*[[#{screen.pm.password.strength.4}]]*/
              };

                /*]]>*/
            </script>
            <h3 th:utext="${expiredPass} ? #{screen.expiredpass.heading} : #{screen.mustchangepass.heading}">Change
                Password Heading</h3>
            <form id="passwordManagementForm" th:if="${passwordManagementEnabled}" method="post"
                th:object="${password}">
                <div class="banner banner-danger banner-dismissible my-4" th:if="${#fields.hasErrors('*')}">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <span th:each="err : ${#fields.errors('*')}" th:utext="${err}">Error text</span>
            </div>

            <div class="cas-field my-3 mdc-input-group">
                <div class="mdc-input-group-field mdc-input-group-field-append">
                    <div class="mdc-text-field  mdc-text-field--with-trailing-icon d-flex caps-check">
                        <input class="mdc-text-field__input pwd" type="password" id="password" th:field="*{password}" required />
                        <label for="username" class="mdc-floating-label" th:utext="#{screen.pm.enterpsw}">Enter Password:</label>
                        <i class="mdi mdi-alert mdc-text-field__icon text-danger caps-warn"></i>
                        
                    </div>
                </div>
                <button class="reveal-password mdc-button mdc-button--raised mdc-input-group-append mdc-icon-button" type="button">
                    <i class="mdi mdi-eye reveal-password-icon"></i>
                    <span class="sr-only">Toggle Password</span>
                </button>
            </div>

            <div class="cas-field my-3">
                <div class="mdc-text-field  mdc-text-field--with-trailing-icon d-flex caps-check">
                    <input class="mdc-text-field__input" type="password" id="confirmedPassword" th:field="*{confirmedPassword}" required />
                    <label for="confirmedPassword" class="mdc-floating-label" th:utext="#{screen.pm.confirmpsw}">Confirm Password:</label>
                    <i class="mdi mdi-alert mdc-text-field__icon text-danger caps-warn"></i>
                </div>
            </div>

            <div class="cas-field my-3 d-flex flex-column">
                <div class="d-flex align-items-center">
                    <span th:text="#{screen.pm.password.strength}">Strength:</span>&nbsp;
                    <span id="password-strength-icon" class="mdi" aria-hidden="true"></span>
                </div>
                <div id="strengthProgressBar" role="progressbar" class="d-none">
                    <div id="progress-strength-indicator" class="progress-bar-indicator text-center"></div>
                    <div class="mdc-linear-progress">
                        <div class="mdc-linear-progress__buffering-dots"></div>
                        <div class="mdc-linear-progress__buffer"></div>
                        <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar" style="transform: scaleX(0);">
                            <span class="mdc-linear-progress__bar-inner"></span>
                        </div>
                        <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
                            <span class="mdc-linear-progress__bar-inner"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cas-field my-3 text-warning" id="password-strength-msg" style="display: none;">
                <div class="suggestions banner banner-warning p-2 mb-2 d-flex align-items-center" role="alert">
                    <span class="mdi mdi-information" aria-hidden="true"></span>&nbsp;
                    <p class="m-0">
                        <span id="password-strength-warning"></span>&nbsp;
                        <span id="password-strength-suggestions"></span>
                    </p>
                </div>
            </div>
            <div class="cas-field my-3 text-danger" id="password-strength-notes">
                <div id="password-policy-violation-msg" class="banner banner-danger p-2" role="alert" style="display: none;">
                    <span class="mdi mdi-alert" aria-hidden="true"></span>&nbsp;
                    <strong th:text="#{screen.pm.password.policyViolation}">Password does not match the password policy
                        requirement.</strong>
                </div>
                <div id="password-confirm-mismatch-msg" class="banner banner-danger p-2" role="alert" style="display: none;">
                    <span class="mdi mdi-alert" aria-hidden="true"></span>&nbsp;
                    <strong th:text="#{screen.pm.password.confirmMismatch}">Passwords do not match.</strong>
                </div>
            </div>

            <div class="cas-field">
                <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                <input type="hidden" name="_eventId" value="submit"/>
                <button class="mdc-button mdc-button--raised mr-2"
                    name="submit"
                    accesskey="s"
                    th:value="#{screen.pm.button.submit}"
                    th:attr="data-processing-text=#{screen.welcome.button.loginwip}"
                    value="SUBMIT"
                    id="submit"
                    type="submit"
                    disabled="true">
                    <span class="mdc-button__label" th:text="#{screen.pm.button.submit}">Submit</span>
                </button>
                <a class="mdc-button mdc-button--outlined" th:href="@{/login}">
                    <span class="mdc-button__label" th:text="#{screen.pm.button.cancel}">CANCEL</span>
                </a>
            </div>
        </form>
        <p th:unless="${passwordManagementEnabled}"
           th:utext="${expiredPass} ? #{screen.expiredpass.message('https://pwd.example.org')} : #{screen.mustchangepass.message('https://pwd.example.org')}">Expired/Must Change Password text</p>
    </div>
</main>
</body>
</html>